iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 13

#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

  • 分享至 

  • xImage
  •  

今天來點不一樣的!來講一個我最近常用的 React UI component library,就是 Chakra UI~ 講到 React,很多人會想到 Material UI (MUI),或是單純講 CSS styling 的話,現在 Tailwind CSS 很紅,那 Chakra UI 跟這兩個 framework / library 有什麼不同呢?

Chakra UI

簡介

Chakra UI 是一個 React 的 UI component library,重點是他很簡單也好用!怎麼說?他的元件都符合 WAI-ARIA 標準 (accessible),也提供客製化 (themeable),還有因為模組化所以可以簡單地做出新元件 (composable)!雖然比較不有名,可是最近真的常常看到用到 Chakra UI 的專案呢~

與 Tailwind CSS 的不同

一個是 CSS 框架,另一個是 React UI component library,所以其實差蠻多的。Tailwind CSS 主要就是做 styling,也是因為他是 CSS 框架,所以可以跟不同的前端框架搭配起來。而 Chakra UI 是 UI 庫,它提供了很多 React 的元件,可是! Chakra UI 也提供 Tailwind-like (類似 Tailwind) 的 styling 功能~

// Chakra UI
<Text mt={2} fontSize="xl" fontWeight="semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</Text>

Text 為 text 元件,這元件有很多 styling 相關的 props,例如 mt 代表 marginTop,或是字體相關的 props 像是 fontSizefontWeight

// Tailwind CSS
<p class="mt-2 text-xl font-semibold">
  Modern, Chic Penthouse with Mountain, City & Sea Views
</p>

上面是 Tailwind CSS 的寫法,是不是長得很像呢?寫起來就是一個是 React 元件的 props,而另一個是寫成元件的 classnames ~

與 Material UI (MUI) 的不同

Material UI (MUI)Chakra UI 一樣是 React 的 UI component library,兩個都提供很多 React 元件。不過 MUI 有一個特點,讓很多人會選擇用 MUI 的其中一個原因,就是基於 Material Design guidelines。如果我們拿 CSS 框架來比喻的話,MUI 像是 Bootstrap,而 Chakra UI 像是 Tailwind CSS。當然 MUI 也提供客製化的功能,不過因為元件本身都有一定的風格,所以想要做一些調整的時候會比較麻煩一點。不過 MUI 提供更多的元件~

Chakra UI 的 Hooks

對,沒錯!Chakra UI 還提供 React hooks!這些 hooks 都是 utility functions,讓我們實作元件的過程簡單一些~ 像這 useDisclosure hook (docs),當我們想要做一個小視窗,點某個按鈕的時候把小視窗打開,點小視窗外的地方或是裡面的關閉按鈕,會把小視窗關起來,我們可以用這 custom hook。

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

useDisclosure hook 回傳四個東西,不過我平常只會用三個:

  • isOpen:如果視窗是開著的狀態,isOpentrue
  • onOpen:我們可以把某個按鈕的 onClick event handler 設成 onClick={onOpen},讓使用者每次點到按鈕,小視窗會立即打開~
  • onClose:跟 onOpen 相反,這 function 會把 isOpen 設成 false

Chakra UI 還提供其他的 custom hooks,像 useClipboard (docs),useBreakpointValue (docs),等等有用的 hooks 喔~

Setup

Chakra UI 本身有用到一些 library,所以安裝的時候還需要裝其他的 library 否則程式碼跑不動:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Emotion 是 CSS-in-JS library,Framer Motion 是 animation library,而 Chakra UI 的元件都有用到這兩個 library,所以都要裝喔~

再來是,我們需要在專案的 root component 把 ChakraProvider import 進來,讓所有元件可以拿到 theme 相關的資料,不過在 Next.js 專案裡我們需要放在 pages/_app.js 裡:

// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

豪!可以開始使用 Chakra UI 所提供的 React 元件做開發了喔~

小結

大家本來就知道 Chakra UI 嗎?覺得如何呢?個人覺得真的好用!因為他提供蠻多元件可以直接拿來用,而且還有像 Tailwind CSS 的那種 styling 方式,讓客製化變得簡單一些~ 還有是因為他符合 a11y 的原則,讓網站比較友善!

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 不過這專案不是用 Chakra UI 開發出來的喔。

祝大家明天上班上課愉快!

Live Demo

晚安 <3

看更多


上一篇
#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser
下一篇
#14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化?
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言